<template>
	<div class="pre-order">
        		<h1 class="confirm-title">确认订单</h1>
    <el-table style="width: 100%"  :data="data">
    <el-table-column align="center"
				label="充值产品">
				<template v-slot="{ row }">
					<img style="vertical-align: middle"
						width="40%"
						:src="row.imageUrl"
						alt="" />
					&nbsp;
					<span style="color: #f4c14f; font-weight: bolder">{{ row.productName }}</span>
					<br />
					<span>{{ row.description }}</span>
				</template>
			</el-table-column>
            <el-table-column align="center"
				prop="price"
				label="单价">
				<template v-slot="{ row }">
					<span class="price">
						{{ row.price }}
					</span>
				</template>
			</el-table-column>
            <el-table-column align="center"
				prop="address"
				label="数量">

				<template v-slot="{row}">
					<el-input-number v-model="quantity"
						size="mini"
						:min="1"
						:max="data[0].inventory"
						label="描述文字"></el-input-number>
					
				</template>

			</el-table-column>
            <el-table-column align="center"
				prop="address"
				label="小计">

				<template>
					<span class="total_fee">{{total_fee}}元</span>
				</template>
			</el-table-column>
    </el-table>
    <div class="total-fee">
			<div class="box-wrap">
				<div class="box-shadow">
					<span class="realpay--title"
						data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
					<span class="realpay--price-symbol">¥</span>
					<span class="realpay--price"
						style="color: rgb(255, 80, 0)">{{total_fee}}元</span>
					<div class="order-confirmAddr">
						<div class="confirmAddr-addr-user">
							<span class="confirmAddr-title">充值详情：</span><span class="confirmAddr-pro">{{data[0].description}}</span>
						</div>
						<div class="confirmAddr-addr">
							<span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">{{userInfo.nickname}}</span>
							&nbsp;
							<span class="confirmAddr-title">昵称:</span><span class="confirmAddr-usn">{{userInfo.username}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="btn">
				<el-button @click="commitOrder"
					type="danger">提交订单</el-button>
			</div>
		</div>
    </div>
</template>

<script>
	import { mapState } from "vuex";
	//引入发送请求的方法
    import * as payApi from "@/api/pay";
export default {
		data() {
			return {
				quantity: 1, //数量
                
			};
		},
		
        computed: {
            ...mapState({
				data:(state)=>[state.currentProduct],
				userInfo:(state)=>state.userInfo,
				//总价格的计算

				total_fee(){
			     return (this.quantity * this.data[0].price).toFixed(2);
				}
			})
        },
        methods: {

            commitOrder(){
				//提交订单方法
				//充值交互  让用户确认
				this.$confirm('锋锋:你确定要提交订单吗? 订单详情:'+ this.data[0].description,"提交订单提示",{type:"warning"})
				.then(async () =>{
					//点击确定按钮
					//下订单,调用接口 不要传金额  只需要把商品的id和数量传给后台就行 后台会自己计算
					let orderRes = await payApi.createPreorder(
						this.data[0].product_id,
						this.quantity
					)
					console.log(orderRes);
					//2  要跳转到支付页面 name:pay 通过query传参的方式 把返回的订单id传给支付页面

					if(orderRes.data.state){
						//订单获取成功
						this.$router.push({
							name:"pay",
							query:{order_id:orderRes.data.order_id}
						})
					}

				})
				.catch(()=>{
					//点击取消按钮
					this.$message.error('已取消订单提交')
				})

            }
        }
}

</script>


<style lang="less" scoped>
.price {
	color: #ff0036;
	font-weight: bolder;
}
.total_fee {
	font-size: 16px;
	color: #ff0036;
}
.el-button {
	width: 180px;
	border-radius: 0;
}

  .confirm-title {
	text-align: left;
	margin-bottom: 30px;
}
.pre-order {
	padding: 29px 100px 0 100px;
    // position: relative;
}
.total-fee {
	margin-top: 50px;
	text-align: right;
}
.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;
	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;
		.realpay--title {
			font-weight: 700;
			color: #333;
		}
		.realpay--price-symbol {
			margin-right: 4px;
			color: #999;
		}
		.realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
		}
		.order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;
			.confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}
			.confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
		}
	}
}

</style>